<template>
  <h2>data的改写</h2>
  <p>count: {{ count }}</p>
  <button @click="add">btn</button>

  <hr />

  <p>num: {{ state.num }}</p>
  <button @click="add2">btn2</button>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";

// 一般的数据全部用ref来定义
// 一般只有form表单的时候用reactive来定义

const count = ref(10);
const add = () => {
  // console.log(count.value);
  count.value++;
  console.log(count.value);
  nextTick(() => {
    console.log(document.querySelector("p").innerHTML);
  });
  // setTimeout(() => {
  //   console.log(document.querySelector("p").innerHTML);
  // }, 0);
};

const state = reactive({
  num: 20,
  name: "zhangsan",
  age: 30,
});
const add2 = () => {
  state.num++;
};
</script>

<!-- <script>
// 定义响应式数据，要用ref方法
// ref方法的返回值是一个对象，对象的value属性才是我们定义的值
// 在html里面使用的时候，不需要加.value
import { ref } from "vue";

export default {
  setup() {
    const count = ref(10);
    const add = () => {
      console.log(count.value);
    };

    // setup里面定义的任何的属性和方法，只要想在template里面使用，都必须return暴露
    return {
      count,
      add,
    };
  },
};
</script> -->
